<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="../libs/main.css">
</head>
<body>


	<script src="../libs/d3.v7.js"></script>
	<script src="data.js"></script>
	<script>
			
				// 容器 svg
				// 绘制元素  xy  g
				// data模块 数据驱动
		var  width = 1000;
		var  height = 500;
		var  margin = ({
			top:20,
			right:0,
			bottom:30,
			left:40
		})

		const  svg = d3.select("body").append("svg")
					.attr("viewBox", [0, 0, width, height])
		      		.call(zoom);

		var x = d3.scaleBand()
				.domain(data.map(d=>d.name))
				.range([margin.left,width-margin.right])
				.padding(0.2)

		var y = d3.scaleLinear()
				.domain([0,d3.max(data,d=>d.value)]).nice()
				.range([height - margin.bottom,margin.top])
		var xAxis = g => g
		    .attr("transform", `translate(0,${height - margin.bottom})`)
		    .call(d3.axisBottom(x).tickSizeOuter(0));		
		var yAxis = g => g
		    .attr("transform", `translate(${margin.left},0)`)
		    .call(d3.axisLeft(y))
		    .call(g => g.select(".domain").remove());


		 // 柱状样式
		// svg.append("g")
		// 	.attr("class","bars")
		// 	.attr("fill","skyblue")
		// 	.selectAll("rect")
		// 	.data(data)
		// 	.join("rect")
		// 	.attr("x",d=>x(d.name))
		// 	.attr("y",d=>y(d.value))
		// 	.attr("width",x.bandwidth())
		// 	.attr("height",d=>y(0) - y(d.value))
		// // x刻度尺
		// svg.append("g")
		// 	.attr("class","x-axis")
		// 	.attr("transform",`translate(0,${height- margin.bottom})`)
		// 	.call(d3.axisBottom(x).tickSizeOuter(0))
		// 	 // 设置x轴刻度


		// svg.append("g")
		// 	.attr("class","y-axis")
		// 	.attr("transform",`translate(${margin.left},0)`)
		// 	.call(d3.axisLeft(y))  //y轴坐标刻度
 		// const svg = d3.create("svg")
		      

		  svg.append("g")
		      .attr("class", "bars")
		      .attr("fill", "steelblue")
		    .selectAll("rect")
		    .data(data)
		    .join("rect")
		      .attr("x", d => x(d.name))
		      .attr("y", d => y(d.value))
		      .attr("height", d => y(0) - y(d.value))
		      .attr("width", x.bandwidth());

		  svg.append("g")
		      .attr("class", "x-axis")
		      .call(xAxis);

		  svg.append("g")
		      .attr("class", "y-axis")
		      .call(yAxis);

		  // return svg.node();


 		function zoom(svg) {
		  const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];

		  svg.call(d3.zoom()
		      .scaleExtent([1, 8])
		      .translateExtent(extent)
		      .extent(extent)
		      .on("zoom", zoomed));

		  function zoomed(event) {
		    x.range([margin.left, width - margin.right].map(d => event.transform.applyX(d)));
		    svg.selectAll(".bars rect").attr("x", d => x(d.name)).attr("width", x.bandwidth());
		    svg.selectAll(".x-axis").call(xAxis);
		  }
		}
	</script>
</body>
</html>